<template>
    <div>
        <el-form :model="projet" style="width: 100%;" label-width="80px" :rules="rules" ref="projetinfo">
            <ElFormItem label="项目名称">
                <ElInput placeholder="请输入你的项目名称" v-model="projet.ProjectName"></ElInput>
            </ElFormItem>
            <ElFormItem label="项目详情">
                <ElInput placeholder="请输入你的项目详情" v-model="projet.ProjectDesc"></ElInput>
            </ElFormItem>
            <ElFormItem label="项目预算">
                <ElInput placeholder="请输入你的项目预算" v-model="projet.Budget" type="number"></ElInput>
            </ElFormItem>

            <ElFormItem label="订单">
                <el-select v-model="projet.OrdersId" placeholder="请选择订单" style="width: 100%">
                    <el-option v-for="item in orderslist" :key="item.Id" :label="item.OrdersName" :value="item.Id" />
                </el-select>
            </ElFormItem>

            <ElFormItem>
                <ElButton @click.prevent="submit(projetinfo)" type="primary">提交</ElButton>
            </ElFormItem>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import ordersapi from '@/api/ordersapi';
import projapi from '@/api/projectapi';
import { FormInstance, ElInput, ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';

const projetinfo = ref<FormInstance>();
const emits = defineEmits(["Close"])
const projet = ref({
    ProjectName: "",
    ProjectDesc: "",
    OrdersId: "",
    Budget: 0
});
const rules = ref();
const orderslist = ref();

const getOrders = () => {
   ordersapi.getall().then(res => {
       console.log("data=", res.data)
       orderslist.value = res.data
   })
}

const submit = (fromEl: FormInstance | undefined) => {
    if (!fromEl) return;
    projapi.Adds(projet.value).then(res => {
        if (res.code > 0) {
            ElMessage({
                message: "添加成功",
                type: "success"
            })
            emits("Close", "add")
        } else {
            ElMessage({
                message: "添加失败",
                type: "error"
            })
        }
    }).catch(err => {
        console.log(err)
    })
}
onMounted(() => {
    getOrders()
})
</script>

<style scoped></style>